import 'package:flutter/material.dart';
import 'package:gif/gif.dart'; // 引入 gif 包
import '../../models/yh_info_model.dart';
import 'package:ninetyfour/l10n/app_localizations.dart';
import '../../services/number_utils.dart';

class ProductCouponView extends StatelessWidget {
  final List<CouponDeListModel>? couponInfoModel;
  final VoidCallback onCouponClick;

  const ProductCouponView({
    super.key,
    required this.couponInfoModel,
    required this.onCouponClick,
  });

  @override
  Widget build(BuildContext context) {
    if (couponInfoModel == null || couponInfoModel!.isEmpty) {
      // 如果 couponInfoModel 为空，则不显示此页面
      return SizedBox.shrink();
    }

    return GestureDetector(
      onTap: onCouponClick,
      child: Container(
        margin: const EdgeInsets.only(top: 15, left: 15, right: 15),
      decoration: BoxDecoration(
        color: Color(0xFFFAE4E2), // 背景颜色
        borderRadius: BorderRadius.circular(15),
      ),
      child: Padding(
        
        padding: const EdgeInsets.all(0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 标题部分
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    const SizedBox(width: 10),
                    Text(
                      AppLocalizations.of(context)!.surpriseCoupon,
                      style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Color(0xFF000000)),
                    ),
                    const SizedBox(width: 5),
                    if (isChineseLocale())
                    Text(
                      AppLocalizations.of(context)!.limitedGrab,
                      style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.red),
                    ),
                    const SizedBox(width: 10),
                    if (isChineseLocale())
                    Text(
                      '${AppLocalizations.of(context)!.totalof}${couponInfoModel?.length}${AppLocalizations.of(context)!.cavailable}',
                      style: TextStyle(fontSize: 12, color: Color(0xFFEC3A22)),
                    ),
                  ],
                ),
                Gif(
                  // 使用 gifController 实例
                  fps: 10,
                  autostart: Autostart.loop,
                  image: isChineseLocale() ? AssetImage('assets/images/cionseui1.gif') : AssetImage('assets/images/cionseui2.gif'),
                  width: 110,
                  height: 46,
                  fit: BoxFit.cover,
                ),
              ],
            ),
            // 优惠券列表部分
            Container(
              height: 40, // 可以根据需要调整高度
              margin: const EdgeInsets.only(left: 10, right: 10),
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: couponInfoModel!.length > 3 ? 3 : couponInfoModel!.length,
                itemBuilder: (context, index) {
                  final coupon = couponInfoModel![index];
                  return Padding(
                    padding: const EdgeInsets.only(right: 3),
                    child: Container(
                      width: (MediaQuery.of(context).size.width - 55) / 3,
                      height: 36,
                      constraints: BoxConstraints(
                        maxHeight: 36,
                      ),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(12),
                        color: Colors.transparent,
                      ),
                      child: Stack(
                        children: [
                          Positioned(
                            left: 0,
                            right: isChineseLocale() ? 31 : 10,
                            child: Image.asset(
                              isChineseLocale() ? 'assets/images/proimg4.png' : 'assets/images/proimg4e.png',
                              height: 36,
                              width: double.infinity,
                              fit: BoxFit.fill,
                            ),
                          ),
                          Positioned(
                            left: 5,
                            right: isChineseLocale() ? 31 : 10,
                            top: 8, 
                            child: Align(
                              alignment: Alignment.center,
                              child: Text(
                                coupon.type == "1" ? NumberUtils.formatDecimalValue(coupon.parvalue * 10) : '${coupon.symbol}${coupon.parvalue}',                                
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                  fontSize:  isChineseLocale() ? 13 : 14,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.red,
                                ),
                              ),
                            ),
                          ),
                          if (isChineseLocale())
                          Positioned(
                            right: 0,
                            top: 0,
                            child: Image.asset(
                              'assets/images/proimg5.png', // 显示右侧的小图标
                              width: 31,
                              height: 36,
                            ),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              ),
            ),
             const SizedBox(height: 10),
          ],
        ),
      ),
    ),
    );  
  }
}
